import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TouchableOpacity, ScrollView, PixelRatio, Alert
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { API, API_GENERATE } from '../../../../config/api';
import HTTP from '../../../../utils/http';
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common';
import Dictionary from '../../../../utils/dictionary';
import { CURRENCY } from '../../../../utils/helper';
import { BockCpt } from '../../enterprise/details/base-info/_components/BockCpt';
import { BaseInfoCpt } from '../../enterprise/details/base-info/_components/BaseInfoCpt';
import { ContractCpt } from '../../enterprise/details/base-info/_components/ContractCpt';
import { AddressBockCpt } from '../../enterprise/details/base-info/_components/AddressBockCpt';
import { CreditCpt } from '../../enterprise/details/base-info/_components/CreditCpt';
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';
import navigationSeevice from '../../../../components/navigation/navigationSeevice';
import { GoodsBockCpt } from './_components/GoodsBockCpt';
import { ProductSelect } from '../../enterprise/details/base-info/_components/ProductSelect';
import { RefuseModal } from '../../../../component/ModalVerifylComponent.js';
import ToastUtil from '../../../../utils/toast';
import { CommonDialog } from '../../../../components/common/Dialog';

const scale = GLOBAL.SCALE;
const locked = require('../../../../imgs/customer/suoding.png');
const unLock = require('../../../../imgs/customer/zhengchang.png');
const expired = require('../../../../imgs/customer/expired.png');
const correct = require('../../../../imgs/global/correct.png');
const query = require('../../../../imgs/global/query.png')
let qualificationTypeObj = {};
let companyPropObj = {};
let corpObj = {}
let lsChangeData = { lookChangeCheck: 'C', lookRemoveCheck: 'D' }
/*
	页面参数
	{
		leadership //领导审批 设置true
		applyId 
	}
*/


export class EnterpriseChangePage extends Component {
	static navigationOptions = ({ navigation }) => {
		return {
			headerTitle: '企业变更审批',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center',
			}
		}
	};

	constructor(props) {
		super(props);
		this.state = {
			detail: null,
			status: 'loading',
			goodsModal: false,
			RefuseModal: false,
			lookChangeCheck: false,  // 查询条件 - 近看变更
			lookRemoveCheck: false,   // 查询条件 - 近看新增
			modalVisible: false
		}
		this.goodsSend = {  // 经营品类商品
			companyId: null,
			applyId: null
		}

		this.appSend = {  // 审批参数
			applyId: null,
			companyId: null,
			auditResult: null,
			remark: ''
		}
	}

	async	componentWillMount () {
		this._init();
	}

	//初始数据处理
	_init = async () => {
		await this._getData();
	}

	//获取详情数据
	_getData = async () => {
		const { applyId,businessKey,formKey,taskId} = this.props.navigation.state.params || {};
		let responseData = await HTTP.POST(API_GENERATE(API.CUSTOMER_CHANGE), { id: applyId });
		console.log('responseData', responseData);
		if (responseData) {
			let { applyId, companyId } = responseData && responseData.companyInfoVO;
			//数据回来赋值
			this.appSend.applyId = applyId;
			this.appSend.businessKey = businessKey;
			this.appSend.formKey = formKey;
			this.appSend.taskId = taskId;
			this.appSend.companyId = companyId;
			this.goodsSend.applyId = applyId;
			this.goodsSend.companyId = companyId;
			//处理数据 (替换新的接口)
			responseData.goodsTreeList = await this._goodsData(responseData);
			await this._getStorageDate(responseData);
		} else {
			this.setState({
				status: 'empty'
			})
		}
	}

	// 新的品类接口 
	_goodsData = async (sendData) => {
		let responseData = await HTTP.POST(API_GENERATE(API.CUSTOMER_CHANGE_GOODS), this.goodsSend);
		console.log('responseData-09-909', responseData);
		return responseData || null
	}


	_getStorageDate = async (detailData) => {
		const { companyInfoVO, corpTypeList, qualificationListPage, sourceAllInfo } = detailData || {};
		//企业类型/合作关系/资质类型
		let companyPropList = await Dictionary.get("COMPANY_PROP");
		let corpResult = await Dictionary.get("EC_CORP_TYPE");
		let qualificationTypeList = await Dictionary.get("EC_QUALIFICATION_TYPE");

		qualificationTypeList.forEach(item => {
			const { dictKey, dictName } = item;
			qualificationTypeObj[dictKey] = dictName;
		});

		qualificationListPage && qualificationListPage.rows && qualificationListPage.rows.map((item, index) => {
			item.qualificationTypeText = qualificationTypeObj[item.qualificationType];
		})

		companyPropList.forEach(item => {
			const { dictKey, dictName } = item;
			companyPropObj[dictKey] = dictName;
		});

		corpResult.forEach(item => {
			const { dictKey, dictName } = item;
			corpObj[dictKey] = dictName;
		});

		let companyPropStr = companyInfoVO.companyType && companyPropObj[companyInfoVO.companyType];
		const companyCorpStr = corpTypeList && corpTypeList.map(item => {
			return corpObj[item.corpType];
		}).join('/');

		let companyPropStrOld = '';
		let companyCorpStrOld = '';
		if (sourceAllInfo && sourceAllInfo.companyInfoVO) {
			if (sourceAllInfo.companyInfoVO.companyType) {
				companyPropStrOld = sourceAllInfo.companyInfoVO.companyType && companyPropObj[sourceAllInfo.companyInfoVO.companyType];
			}
			if (sourceAllInfo.corpTypeList) {
				companyCorpStrOld = sourceAllInfo.corpTypeList && sourceAllInfo.corpTypeList.map(item => {
					return corpObj[item.corpType];
				}).join('/');
			}
		}

		//基本数据
		let infoBase = this._getInfoBaseChange(detailData, companyPropStr, companyCorpStr, companyPropStrOld, companyCorpStrOld);


		this.setState({
			companyPropStr,
			companyCorpStr,
			companyPropStrOld,
			companyCorpStrOld,
			detail: detailData,
			qualificationTypeObj,
			infoBase
		})
	}

	//改变类型
	_changeText = (newText, oldText) => {
		let resultText = null;
		if (oldText != newText) {
			if (!oldText) {
				resultText = '增';
			} else if (!newText) {
				resultText = '删';
			} else {
				resultText = '改';
			}
		}
		return resultText;
	}

	// 基本信息 - change
	_getInfoBaseChange = (detail, companyPropStr, companyCorpStr, companyPropStrOld, companyCorpStrOld) => {
		let { companyInfoVO, acctList, sourceAllInfo } = detail || {};
		let oldData = this._changeData(companyInfoVO, sourceAllInfo.companyInfoVO);
		let { creditLevel, companyName, companyNatureName, registerFund, linkPhone, registAddress, creditCode, creditFile, taxCode, openBankName,
			openAcctNo, invoicePhoneNo, invoiceFileId, invoiceAddress, expireDate, isLock, countryName, provinceName, cityName, registerFundCurrency
			, registerDate, legalName } = companyInfoVO || {};
		let companyInfoVOold = oldData.changeDate || {};
		let infoBase = [{ lable: '企业名称', value: [companyName || companyInfoVOold.companyName || '--'], icon: isLock ? locked : unLock, changeText: this._changeText(companyName, companyInfoVOold.companyName) }];
		infoBase.push({
			lable: '企业评级', value: [creditLevel || '1级'], icon: query,
			iconStyle: { width: 10 * scale, height: 10 * scale },
			iconPress: () => { this.setState({ modalVisible: true }) }
		});
		infoBase.push({ lable: '国家及地区', value: [`${countryName || ''}${provinceName || ''}${cityName || ''}`], changeText: (countryName != companyInfoVOold.countryName || provinceName != companyInfoVOold.provinceName || cityName != companyInfoVOold.cityName) ? '改' : null });
		infoBase.push({ lable: '企业属性', value: [companyPropStr || companyPropStrOld || '--'], changeText: this._changeText(companyPropStr, companyPropStrOld) })
		infoBase.push({ lable: '资本性质', value: [companyNatureName || companyInfoVOold.companyNatureName || companyInfoVOold.companyNatureName || '--'], changeText: this._changeText(companyNatureName, companyInfoVOold.companyNatureName) })
		infoBase.push({ lable: '合作关系', value: [companyCorpStr || companyCorpStrOld || '--'], changeText: this._changeText(companyCorpStr, companyCorpStrOld) })
		infoBase.push({ lable: '注册资本', value: [(registerFund || '--') + `万${CURRENCY.getUnit(registerFundCurrency).text}`], changeText: this._changeText(registerFund, companyInfoVOold.registerFund) })
		infoBase.push({ lable: '注册日期', value: [registerDate && registerDate.substring(0, 10) || '--'], changeText: this._changeText(registerDate, companyInfoVOold.registerDate&&companyInfoVOold.registerDate.substring(0, 10))||null });
		infoBase.push({ lable: '法人代表', value: [legalName || companyInfoVOold.legalName || '--'], changeText: this._changeText(legalName, companyInfoVOold.legalName) });
		infoBase.push({ lable: '企业联系电话', value: [linkPhone || companyInfoVOold.linkPhone || '--'], changeText: this._changeText(linkPhone, companyInfoVOold.linkPhone) })
		infoBase.push({ lable: '企业地址', value: [registAddress || '--'], changeText: this._changeText(registAddress, companyInfoVOold.registAddress) })
		infoBase.push({ lable: '统一信用代码', value: [creditCode || '--'], changeText: this._changeText(creditCode, companyInfoVOold.creditCode) })
		infoBase.push({ lable: '开票信息', value: [], type: 'T' }) //这个数据结构只针对企业基本信息模块-->不传value则默认为副标题
		infoBase.push({ lable: '纳税人识别号', value: [taxCode || companyInfoVOold.taxCode || '--'], changeText: this._changeText(taxCode, companyInfoVOold.taxCode) })
		infoBase.push({ lable: '开户行', value: [openBankName || companyInfoVOold.openBankName || '--'], changeText: this._changeText(openBankName, companyInfoVOold.openBankName) })
		infoBase.push({ lable: '开户行帐号', value: [openAcctNo || companyInfoVOold.openAcctNo || '--'], changeText: this._changeText(openAcctNo, companyInfoVOold.openAcctNo) })
		infoBase.push({ lable: '开票电话', value: [invoicePhoneNo || companyInfoVOold.invoicePhoneNo || '--'], changeText: this._changeText(invoicePhoneNo, companyInfoVOold.invoicePhoneNo) })
		infoBase.push({ lable: '开票地址', value: [invoiceAddress || companyInfoVOold.invoiceAddress || '--'], changeText: this._changeText(invoiceAddress, companyInfoVOold.invoiceAddress) })
		infoBase.push({ lable: '银行信息', value: [], type: 'T' })//这个数据结构只针对企业基本信息模块-->不传value则默认为副标题
		acctList && acctList.length && acctList.map((item, index) => {
			infoBase.push({ lable: '开户行', value: [item.openBankName || companyInfoVOold.openBankName || '--'], changeText: this._changeText(openBankName, companyInfoVOold.openBankName) })
			infoBase.push({ lable: '开户行帐号', value: [item.openAcctNo || companyInfoVOold.openAcctNo || '--'], changeText: this._changeText(openAcctNo, companyInfoVOold.openAcctNo) })
		})
		infoBase.push({ lable: '附件信息', value: [], type: 'T' })
		infoBase.push({ lable: '营业执照', value: [''], changeText: this._changeText(creditFile, companyInfoVOold.creditFile), fileId: creditFile || companyInfoVOold.creditFile, type: 'C' })
		infoBase.push({ lable: '', value: [`有效期至${(expireDate && expireDate.substring(0, 10)) || (companyInfoVOold.expireDate && companyInfoVOold.expireDate.substring(0, 10)) || '--'}`], changeText: this._changeText(expireDate, companyInfoVOold.expireDate && companyInfoVOold.expireDate.substring(0, 10)) })
		infoBase.push({ lable: '开票附件', value: ['invoice'], fileId: invoiceFileId || companyInfoVOold.invoiceFileId, type: 'I', changeText: this._changeText(invoiceFileId, companyInfoVOold.invoiceFileId) })
		return {
			data: infoBase,
			changeIndex: oldData.changeIndex
		};
	}

	//资质信息对比
	_aptitudeData = (detailData) => {
		let { qualificationListPage } = detailData;
		console.log('资质数据', qualificationListPage)
		let speed = 0;
		qualificationListPage.rows && qualificationListPage.rows.length && qualificationListPage.rows.forEach((item, index) => {
			if (item.companyId != null && (item.operateType == 'U' || item.operateType == 'C' || item.operateType == 'D')) {
				speed++;
			}
		})
		return speed;
	}

	// 对比数据
	_changeData = (newData, oldData) => {
		if (!oldData || !newData) return;
		let changeArr = ['companyName', 'companyNatureName', 'registerFund', 'linkPhone', 'registAddress', 'creditCode', 'creditFile', 'taxCode', 'openBankName',
			'openAcctNo', 'invoicePhoneNo', 'invoiceFileId', 'invoiceAddress', 'expireDate', 'isLock',
			'companyType', 'corpTypeList'];
		let speed = 0;
		changeArr.forEach((item, index) => {
			if (oldData[item] != newData[item]) {
				speed++;
			}
		})
		return {
			changeIndex: speed,
			changeDate: oldData
		}
	}

	//检查资质是否有过期
	_getQualificationInfo (data) {
		const { rows } = data || {};
		const { qualificationTypeObj } = this.state;
		let isExpired;

		if (rows && rows.length) {
			for (let i = 0; i < rows.length; i++) {
				if (rows[i].isExpired == '-1') {
					isExpired = true;
					break;
				}
			}
		}
		return { isExpired, qualificationTypeObj };
	}

	//点击企业信息标题查看操作日志
	_onBaseInfoTitlePress (companyId) {
		navigationSeevice.navigate('LogListPage', { companyId })
	}

	//查看资质详情or新增
	_onCreditPress (data) {
		const { detail } = this.state;
		const { companyInfoVO } = detail || {};
		//跳转传参传的太乱，后期改版新增资质时再调整
		navigationSeevice.navigate('EnterpriseEditQualificationPage', {
			qualificationVO: { companyId: companyInfoVO.companyId, },
			qualificationType: {
				dictKey: data.qualificationType,
				dictName: data.qualificationTypeText
			},
			companyName: companyInfoVO.companyName,
			ifEdit: false, //详情页是否可操作
			qualificationInfo: data
		})
	}

	// 基本信息模版- demo
	_viewBase = (sendData, index, length) => {
		return (
			<BaseInfoCpt data={sendData} key={index} />
		)
	}

	// 企业成员- demo
	_viewContract = (sendData, index, length) => {
		let { detail } = this.state;
		return (
			<ContractCpt data={sendData} baseData={detail.companyInfoVO} key={index} index={index} length={length} />
		)
	}

	// 企业资质 - demo
	_viewCredit = (sendData, index, length, refresh, changeIndex) => {
		const { qualificationAddress } = sendData;
		return (
			<CreditCpt isChange={true} changeIndex={changeIndex} data={sendData} key={index} index={index} length={length}
				onPress={() => this._onCreditPress(sendData)}
				checkQualificationImage={() => { qualificationAddress && this._onCreditPress(sendData) }} />
		)
	}

	_cancelPress (a) {
		this.setState({ goodsModal: false })
	}

	_searchPress = async (searchCode) => {
		let { detail } = this.state;
		Object.assign(this.goodsSend, searchCode);
		let lsData = await this._goodsData(detail);
		return lsData || [];
	}

	// 审批
	approve = async () => {
		let text = this.appSend.auditResult ? '同意' : '驳回';
		this.setState({
			showRejectModal: false,
			status: 'loading'
		})
		let res = await HTTP.POST(API_GENERATE(API.ENTERPRISE_AUDIT), this.appSend);
		if (res) {
			ToastUtil.showSuccess(`${text}成功`).then(() => {
				this.props.navigation.goBack();
			})
		} else {
			this.setState({
				status: 'data'
			}, () => {
				ToastUtil.showWarning(`${text}失败`);
			})
		}
	}

	_changeTypeList = () => {
		let lsChangeData = [];
		let { lookChangeCheck, lookRemoveCheck } = this.state;

		if (lookChangeCheck) {
			lsChangeData.push('C');
		}
		if (lookRemoveCheck) {
			lsChangeData.push('D');
		}
		return lsChangeData.length ? lsChangeData : null
	}

	//切换复选框
	_lookChangeCheckFn = (checked, keyStr) => {
		const { detail } = this.state;
		this.goodsSend[keyStr] = !checked;
		this.setState({
			[keyStr]: !checked
		}, async () => {
			this.goodsSend.operateTypeList = this._changeTypeList();
			detail.goodsTreeList = await this._searchPress();
			this.setState({ detail })
		})
	}

	//品类弹框-右侧复选框
	_renderRight = () => {
		let { lookChangeCheck, lookRemoveCheck } = this.state;

		return (
			<View style={styles.statusBox}>
				<TouchableOpacity onPress={() => { this._lookChangeCheckFn(lookChangeCheck, 'lookChangeCheck') }} style={styles.statusRow}>
					<View style={styles.statusEmpty}>
						{
							lookChangeCheck ? <Image source={correct} style={styles.statusImg} /> : null
						}
					</View>
					<Text style={styles.statusText}>仅看增</Text>
				</TouchableOpacity>
				<TouchableOpacity onPress={() => { this._lookChangeCheckFn(lookRemoveCheck, 'lookRemoveCheck') }} style={styles.statusRow}>
					<View style={styles.statusEmpty}>
						{
							lookRemoveCheck ? <Image source={correct} style={styles.statusImg} /> : null
						}
					</View>
					<Text style={styles.statusText}>仅看删</Text>
				</TouchableOpacity>
			</View>)
	}

	_renderToastWrap = () => {
		return (
			<View>
				<Text style={styles.toastText}>1.资信评级1级不支持授信订单、保证金业务、暂定价商品</Text>
				<Text style={styles.toastText}>2.资信评级2级支持做授信订单、保证金业务、暂定价商品</Text>
			</View>
		)
	}

	render () {
		const { leadership, applyId } = this.props.navigation.state.params || {};
		const { detail, status, infoBase, goodsModal, showRejectModal, modalVisible } = this.state;
		const { companyInfoVO, contactorList, addressListPage, qualificationListPage, goodsTreeList } = detail || {};
		const { companyId } = companyInfoVO || {};
		const { rows } = qualificationListPage || {};
		let qfcInfo = qualificationListPage && this._getQualificationInfo(qualificationListPage);

		return (
			<View style={styles.body}>
				<View style={styles.headBox}></View>
				{
					detail ? <ScrollView showsVerticalScrollIndicator={false}>
						<View style={styles.baseInfoContainer}>
							<BockCpt titleStyle={styles.basoInfoTitleStyle}
								onTitlePress={() => { this._onBaseInfoTitlePress(companyId) }}
								renderView={this._viewBase}
								data={{ title: '企业信息', listData: infoBase.data, changeIndex: infoBase.changeIndex }} />
							<BockCpt
								renderView={this._viewContract}
								data={{ title: '企业成员', listData: contactorList }}
								refresh={() => this._init()} />
							<BockCpt
								titleIcon={qfcInfo && qfcInfo.isExpired ? expired : null}
								renderView={this._viewCredit}
								data={{ title: '企业资质', listData: rows, changeIndex: this._aptitudeData(detail) }}
								refresh={() => this._init()} />
							<AddressBockCpt
								data={{ title: '出入库地址', listData: addressListPage, }}
								baseData={{ status, applyId }}
							/>
							<GoodsBockCpt
								onBockPress={() => { this.setState({ goodsModal: true }); }}
								data={{ title: '经营品类' }}
								baseData={{ id: companyInfoVO.applyId || '', companyId, goodsTreeList }} />
							{
								leadership && detail ? <View style={{ height: 80 * scale }}></View> : null
							}
						</View>
					</ScrollView> : <View style={{ flex: 1 }}><PageStatusIndex status={status} /></View>
				}
				{
					leadership && detail && <View style={styles.operation}>
						<TouchableOpacity style={[styles.operationBtn, styles.operationBtnActive]} onPress={() => {
							this.appSend.auditResult = 1;
							this.appSend.remark = '';
							this.setState({
								showRejectModal: true
							})
						}}>
							<Text style={[styles.operationText, styles.operationTextActive]}>同意</Text>
						</TouchableOpacity>
						<TouchableOpacity style={[styles.operationBtn]} onPress={() => {
							this.appSend.auditResult = 0;
							this.appSend.remark = '';
							this.setState({
								showRejectModal: true
							})
						}}>
							<Text style={[styles.operationText]}>驳回</Text>
						</TouchableOpacity>
					</View>
				}
				{
					goodsModal ?
						<ProductSelect
							searchPress={this._searchPress}
							cancelPress={() => this._cancelPress()}
							data={goodsTreeList || []}
							change={true}
							renderRight={this._renderRight}
							placeholderText={'请输入分类名称/业务员'}
							modalVisible={goodsModal} />
						: null
				}

				<RefuseModal
					titleText={'审批意见'}
					placeholderText={this.appSend.auditResult ? '请输入同意原因' : null}
					propsDefaultValue={this.appSend.auditResult ? '审批同意' : '审批驳回'}
					visible={showRejectModal}
					btnPress={(text) => {
						this.appSend.remark = text;
						this.approve();
					}}
					bgPress={() => {
						this.setState({
							showRejectModal: false,
						});
					}} />

				<CommonDialog modalVisible={modalVisible} title={'提示'} renderCustom={this._renderToastWrap} onClosePress={() => { this.setState({ modalVisible: false }) }} />
			</View>
		)
	}
}


const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#F4F7FE',
		position: 'relative'
	},
	headBox: {
		width: '100%',
		height: 80 * scale,
		backgroundColor: style.color.themeColor,
		position: 'absolute',
		top: 0,
		zIndex: -1
	},
	iframe: {
		flex: 1,
	},
	baseInfoContainer: {
		flex: 1,
		flexDirection: 'column',
		alignItems: 'center',
		paddingLeft: 14 * scale,
		paddingRight: 14 * scale,
	},
	basoInfoTitleStyle: {
		borderWidth: 1 * scale,
		borderColor: style.color.themeColor,
		color: style.color.themeColor,
		borderRadius: 8 * scale,
		padding: 5 * scale
	},
	body: {
		flex: 1,
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale,
		backgroundColor: style.color.bgGray,
		position: 'relative'
	},
	operation: {
		position: 'absolute',
		bottom: 0,
		backgroundColor: style.color.white,
		height: 80 * scale,
		width: '100%',
		flexDirection: 'row',
		justifyContent: 'flex-end',
		alignItems: 'center'
	},
	operationBtn: {
		width: 90 * scale,
		borderColor: style.color.themeColor,
		borderRadius: 20 * scale,
		borderWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		height: 30 * scale,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		marginRight: 20 * scale
	},
	operationText: {
		color: style.color.themeColor,
		fontSize: 13 * scale
	},
	operationBtnActive: {
		backgroundColor: style.color.themeColor,
	},
	operationTextActive: {
		color: style.color.white
	},
	statusBox: {
		// marginLeft: 10 * scale,
		// marginRight: 10 * scale,
	},
	statusRow: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingTop: 5 * scale,
		paddingBottom: 5 * scale,
		marginRight: 10 * scale,
	},
	statusEmpty: {
		borderWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderColor: style.color.themeColor,
		width: 12 * scale,
		height: 12 * scale,
		marginRight: 5 * scale,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center'
	},
	statusImg: {
		width: 10 * scale,
		height: 6 * scale
	},
	statusText: {
		fontSize: 12 * scale,
		color: style.color.fontRed1
	},
	toastText: {
		fontSize: 12 * scale,
		marginBottom: 8 * scale
	},
})